<template>
  <div class="wrapper">
    <div class="content">
      <div class="tool">
        <el-input v-model="search.query" placeholder="请输入岗位名称" size="small"
          style="width: 250px;margin-right: 20px;z-index: 9999;"></el-input>
         
        <el-button size="small" type="primary" style="background-color: #00a6a7;" @click="search">查询</el-button>
        <el-button size="small" @click="reset">重置</el-button>
        
      
        
      </div>
      <div class="table">
        <template>
          <el-table  :data="tableData"   max-height="470" style="width: 100%">
            <el-table-column
      type="selection"
      width="55"></el-table-column>
     
            <el-table-column :prop="item.prop" :label="item.lable" v-for="item in c" :key="item.prop">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"  style="color:#00a6a7;">
                  审核
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"  style="color:#00a6a7;">
                  查看
                </el-button>
               
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[5, 10, 15, 30]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import { c } from './columns'
export default {
  data() {
    return {
      c,
      search: {
        query: ''
      },
      currentPage4: 4,
      options:[
        {
          label:'互联网/AI',
          value:'1'
        },
        {
          label:'电子/通信/半导体',
          value:'2'
        },
        {
          label:'服务业',
          value:'3'
        },
        {
          label:'消费品/批发/零售',
          value:'4'
        },
        {
          label:'房地产/建筑',
          value:'5'
        },
        {
          label:'教育培训',
          value:'4'
        },
        {
          label:'制造业',
          value:'5'
        },
      ],
      tableData: [
        {
          name: '100万',
          name1: '码上客',
          zz: '10-12k',
          jy: '武汉江夏区阳光创谷5栋605',
        },
        {
          name: '100万',
          name1: '码上客',
          zz: '10-12k',
          jy: '武汉江夏区阳光创谷5栋605',
        },
        {
          name: '100万',
          name1: '码上客',
          zz: '10-12k',
          jy: '武汉江夏区阳光创谷5栋605',
        },
        {
          name: '100万',
          name1: '码上客',
          zz: '10-12k',
          jy: '武汉江夏区阳光创谷5栋605',
        },
       


      ],
      multipleSelection:[]

    }
  },
  methods: {
    search(){},
    reset(){
      this.search.query = '',
      this.search.value = '';
      this.search()
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      }
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin-top: 50px;
  height: calc(100vh - 52px);
  overflow: hidden;

  .content {
    width: 70%;
    height: 100%;
    margin: 30px auto;

    .tool {
      margin-top: -18px;
      margin-bottom: 18px;
    }

    .table {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      height: 500px;
      margin-bottom: 18px;
    }

    .page {
      text-align: right;
    }
  }
}
</style>